<template>
  <div class="page">
    <div class="page_top ai-margin-bottom ai-border-bottom">
      <div class="cont ai-margin-tb-sz ai-margin-lr">
        <div class="cont_left">
          <el-input
            size="small"
            v-model="type"
            placeholder="请输入添加坐车类型"
            style="width: 200px;"
            class="filter-item"
            @keyup.enter.native="handleAddType"
          />
          <el-button
            size="small"
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleAddType"
          >添加坐车类型</el-button>
        </div>
        <div class="cont_right"></div>
      </div>
    </div>
    <div class="page_bottom">
      <el-tabs type="border-card" class="ai-margin">
        <el-tab-pane class="m-display" label="坐车管理">
          <div class="ai-display-ib" v-for="tag in dynamicTags" :key="tag.id">
            <el-tag
              @mouseleave="handleMouseleave(tag.id)"
              @mouseenter="handleMouseenter(tag.id)"
              @click="handleEditorType(tag)"
              :key="tag.id"
              closable
              :disable-transitions="false"
              @close="handleDelete(tag)"
            >{{tag.type}}</el-tag>
          </div>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          ></el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加类型</el-button>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog title="修改" :visible.sync="dialogVisible" width="50%">
      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
        <el-form-item label="被修改的类型：">
          <el-tag>{{form.type}}</el-tag>
        </el-form-item>
        <el-form-item label="类型修改为：" prop="newType">
          <el-input v-model="form.newType" placeholder="请输入类型"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEditor('form')">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  createEquipmentType,
  deleteEquipmentType,
  deleteEquipmentTypeById,
  getEquipmentType,
  updateEquipmentType
} from "../../api/equipment";

export default {
  name: "equipmentType",
  data() {
    return {
      inputVisible: false,
      inputValue: "",
      dynamicTags: [
        {
          id: 1,
          type: "包车"
        },{
          id: 2,
          type: "专车"
        },{
          id: 3,
          type: "拼车"
        },
      ],
      type: "",
      current: "",
      dialogVisible: false,
      form: {
        id: "",
        type: "",
        newType: ""
      },
      rules: {
        newType: [
          { required: true, message: "修改内容不能为空", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    // this.handleContent()
  },
  methods: {
    /**
     *
     * 获取所有类型
     */
    handleContent() {
      getEquipmentType()
        .then(rsp => {
          console.log(rsp);
          this.dynamicTags = rsp.result;
        })
        .catch(respond => {
          console.log(respond);
        });
    },
    /**
     * 添加类型
     */
    handleAddType() {
      console.log(this.type);
      if (this.type === null || this.type === "") {
        this.$message.warning("添加的设备类型不能为空");
      } else {
        createEquipmentType(this.type)
          .then(rsp => {
            this.$message.success(rsp.msg);
            this.handleContent();
            this.type = "";
          })
          .catch(respond => {
            this.$message.warning(respond.msg);
          });
      }
    },
    /**
     * 删除类型
     * @param id 类型id
     */
    handleDelete(tag) {
      this.$confirm(`此操作将永久删除 ${tag.type} , 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteEquipmentTypeById(tag.id)
            .then(rsp => {
              console.log(rsp);
              this.$message.success(rsp.msg);
              this.handleContent();
            })
            .catch(respond => {
              this.$message.warning(respond.msg);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
      console.log(id);
    },
    handleMouseleave(id) {
      this.current = "";
    },
    handleMouseenter(id) {
      this.current = id;
    },
    handleEditorType(row) {
      this.dialogVisible = true;
      this.form = row;
      console.log(row);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    /**
     * 动态添加标签
     */
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        createEquipmentType(inputValue)
          .then(rsp => {
            this.$message.success(rsp.msg);
            this.handleContent();
            this.type = "";
          })
          .catch(respond => {
            this.$message.warning(respond.msg);
          });
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    /**
     * 修改类型
     * @param form
     */
    handleEditor(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          updateEquipmentType(this.form.id, this.form.newType)
            .then(rsp => {
              console.log(rsp);
              this.$message.success(rsp.msg);
              this.handleContent();
              this.dialogVisible = false;
            })
            .catch(reason => {
              console.log(reason);
            });
        } else {
          this.$message.warning("修改的内容不能为空");
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
.page {
  width: 95%;
  margin: 0 auto;

  .page_top {
    .cont {
      display: flex;
      flex-direction: row;
      margin: 30px 0px;

      .cont_left {
        flex: 1;

        .cont_input {
          width: 220px;
          margin-right: 10px;
        }
      }

      .cont_right {
        flex: 1;
        display: flex;

        .cont_input {
          width: 220px;
          margin-right: 20px;
        }
      }
    }
  }
}

.m-display {
  display: flex;

  .ai-display-ib {
    margin: 10px;
  }
}
.button-new-tag {
  margin-left: 10px;
  margin-top: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  margin-top: 10px;
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>

